<template>
  <view 
    class="btn" 
    :class="[typeClass, sizeClass, disabled ? 'btn-disabled' : '']"
    @click="handleClick"
  >
    <view v-if="loading" class="btn-loading"></view>
    <text v-if="text" class="btn-text">{{ text }}</text>
    <slot v-else></slot>
  </view>
</template>

<script>
export default {
  name: 'Button',
  props: {
    // 按钮类型: primary, secondary, warning, error, info
    type: {
      type: String,
      default: 'primary'
    },
    // 按钮大小: small, medium, large
    size: {
      type: String,
      default: 'medium'
    },
    // 按钮文字
    text: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    typeClass() {
      return `btn-${this.type}`;
    },
    sizeClass() {
      return `btn-${this.size}`;
    }
  },
  methods: {
    handleClick() {
      if (!this.disabled && !this.loading) {
        this.$emit('click');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  transition: opacity 0.2s;
  
  &:active {
    opacity: 0.8;
  }
}

.btn-primary {
  background-color: $primary-color;
  color: $card-background;
}

.btn-secondary {
  background-color: $secondary-color;
  color: $card-background;
}

.btn-warning {
  background-color: $warning-color;
  color: $card-background;
}

.btn-error {
  background-color: $error-color;
  color: $card-background;
}

.btn-info {
  background-color: $info-color;
  color: $card-background;
}

.btn-small {
  padding: $spacing-xs $spacing-sm;
  font-size: $font-size-sm;
  height: 60rpx;
}

.btn-medium {
  padding: $spacing-sm $spacing-base;
  font-size: $font-size-base;
  height: 80rpx;
}

.btn-large {
  padding: $spacing-base $spacing-lg;
  font-size: $font-size-lg;
  height: 100rpx;
}

.btn-disabled {
  opacity: 0.5;
}

.btn-loading {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: rotate 1s linear infinite;
  margin-right: $spacing-sm;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-text {
  font-weight: bold;
}
</style>